<template>
	<view id="set">
		<view class="page-header">
			<image class="header-img" v-if="userInfo.headimgurl"  :src="userInfo.headimgurl" mode=""></image>
			<image class="header-img" v-else src="../../static/img/header_image.png" mode=""></image>
			<view class="phone-name">
				<text class="name">{{userInfo.true_name}}</text>
				<text class="phone">{{userInfo.phone}}/{{userInfo.code}}</text>
			</view>
		</view>
		<view class="row-view">
			<view class="row-cell" @click="toChangePhonePage">
				<view class="row-cell-left">登录手机号</view>
				<view class="row-cell-right">{{userInfo.phone}}<uni-icons class="row-icon" type="arrowright" color="#878788" size="15"></uni-icons></view>
			</view>
			<view class="row-cell" @click="showChangeWechatModal">
				<view class="row-cell-left">更换微信</view>
				<view class="row-cell-right"><uni-icons class="row-icon" type="arrowright" color="#878788" size="15"></uni-icons></view>
			</view>
			<view class="row-li">
				<view class="row-li-cell">
					<view class="row-li-cell-left">自带接单短信提醒</view>
					<view class="row-li-cell-right"><switch class="switch-btn" color="#FF5000" style="transform:scale(0.8)" :checked="smsStatus" @change="changeChecked" /></view>
				</view>
				<view class="tips">
					<view>短信通知，用户可按许开启</view>
					<view>该类短信从佣金中收取0.1({{merchantMoneyText}})/条的短信运营商服务费用</view>
				</view>
			</view>
		</view>
		<button class="sign-out-btn" @click="signOut">退出登录</button>
		<u-modal
			:showModal="showSmsCodeModal"
			title="短信通知"
			content="您确定要开启短信通知"
			@cancleModal = "showSmsCodeModal = false"
			@confirmModal="openMsgNotice"
			>
		</u-modal>
		<u-modal
			:showModal="isShowPhoneModal"
			title="手机号验证"
			@cancleModal = "isShowPhoneModal = false"
			@confirmModal="verificationPhone"
			>
			<view>
				<view class="phone">手机号：{{userInfo.phone}}</view>
				<!--<view class="graph-code">
					<validate class="validate"  @success="setValidate"></validate>
				</view>-->
				<view class="sms-code">
					<input class="code-input" v-model="phoneCode" type="text" value="" />
					<button @click="getPhoneCode" class="send-code-btn">{{codeText}}</button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiPushUser,
		apiSendSms,
		apiWechatLogin,
		apiOpenCloseSmsStatus,
		apiChangePushWeChat,
		apiChangeWeChat
	} from '../../../http/apis.js'
	import uModal from '../../components/uni-modal/uni-modal.vue'
	// import Validate from '../../components/graphVerification.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default{
		computed: {
			...mapState(['token'])
		},
		components:{
			uModal,
			// Validate
		},
		data(){
			return{
				smsStatus: false,
				userInfo: {},
				isShowPhoneModal: false,
				showSmsCodeModal: false,
				codeText: '发送验证码',
				phoneCode: '',
				phone: '',
				code: '',
				// validateCode: '',
				merchantMoneyText: uni.getStorageSync('merchantMoneyText')
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad(option) {
			this.code = option.code
      // #ifdef H5
			this.urlJump()
      // #endif
		},
		methods:{
			...mapMutations(['logout']),
			getUserInfo(){
				apiPushUser({
					token: this.token
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.userInfo = res.data.msg;
						this.smsStatus = this.userInfo.sms_status == 1 ? true : false
						this.changeWechat()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toChangePhonePage(){
				uni.navigateTo({
					url:'./changePhone?phone=' + this.userInfo.phone
				})
			},
			changeChecked(e){
				if (e.detail.value) {
					this.showSmsCodeModal = true
				} else {
					this.openMsgNotice()
				}

			},
			openMsgNotice () {
				apiOpenCloseSmsStatus({
					token: this.token
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.showSmsCodeModal = false
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			showChangeWechatModal(){
				if(this.userInfo.push_change_we_chat == 2){
					this.$msg.showToast('暂未开放，请等待通知')
				}else {
				  this.isShowPhoneModal = true
				}
			},
			verificationPhone(){
				if(!this.phoneCode){
					this.$msg.showToast('短信验证码不能为空')
					return
				}
				apiChangePushWeChat({
					token: this.token,
					phoneCode: this.phoneCode,
					phone: this.userInfo.phone
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.isShowPhoneModal = false
						this.loginByWechat()
					} else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			getPhoneCode(){
				/*if (!this.validateCode) {
					this.$msg.showToast('请先点击上方的验证')
					return
				}*/
				if(this.codeText!=='发送验证码'){
					return
				}
				apiSendSms({
					phone:this.userInfo.phone,
					codeType:'pushChangeWeChat',
					// captcha: this.validateCode
					captcha: ""
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.codeText = 60
						let timer=setInterval(()=>{
							this.codeText=this.codeText -1
							if(this.codeText==0){
								this.codeText='发送验证码'
								clearInterval(timer)
							}
						},1000)
					} else {
						this.$msg.showToast(res.data.msg)
						// this.resetValidate()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			/*setValidate(resp){
				this.validateCode = resp
			},
			resetValidate() {
			    this.validateCode = "";
			    LUOCAPTCHA && LUOCAPTCHA.reset();
			},*/
			urlJump(){
				let link = window.location.href;
				if (link.includes("com/?code")) {
					var url = link.split('state=STATE/')
					var urlLeft = url[0].split('com/')[0]
					var urlRight = url[0].split('com/')[1]
					var newUrl = urlLeft + 'com/' + url[1] + urlRight + 'state=STATE'
					window.location.href = newUrl;//拼接跳转
				}
			},
			changeWechat(){
				if(this.code){
					apiChangeWeChat({
						token: this.token,
						changeType: 2,//1是更换公众号，2是微信,
						code: this.code,
						uid: this.userInfo.id//用户id
					}).then(res =>{
					    if(res.data.code == 1)  {
							this.$msg.showToast(res.data.msg)
							setTimeout(()=>{
								uni.switchTab({
									url: '../home/home',
								});
							},500)
						}
					}).catch(res => {
						this.$msg.showToast(res.data.msg)
					})
				}
			},
			loginByWechat(){
				if (this.isWechat()) {
					apiWechatLogin({}).then(res =>{
					    if(res.data.code == 1)  {
							let appid = res.data.msg
							let link = this.GLOBAL.MAIN_URL + 'pages/set/set'
							let uri = encodeURIComponent(link);
							let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
							window.location.href = authURL
						}
					}).catch(res => {
						this.$msg.showToast(res.data.msg)
					})
				} else {
					this.$msg.showToast('请到微信上打开该平台')
				}
			},
			isWechat () {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			signOut(){
				this.logout();
				uni.removeStorageSync('token')
				this.$msg.showToast('退出成功')
				setTimeout(()=>{
					uni.navigateTo({
						url: '../login/login'
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	#set{
		.page-header {
			display: flex;
			align-items: center;
			position: relative;
			background: #FFFFFF;
			border-radius: 0px 0px 24upx 24upx;
			.header-img {
				margin: 50upx 34upx 32upx 32upx;
				width: 104upx;
				height: 104upx;
				border-radius: 50%;
			}
			.phone-name {
				margin-top: 20upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 104upx;
				box-sizing: border-box;
				.name {
					font-size: 34upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 40upx;
				}
				.phone {
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 28upx;
				}
			}
		}
		.row-view {
			background: #FFFFFF;
			border-radius:  24upx;
			padding: 0 32upx 32upx 32upx;
			align-items: center;
			margin: 32upx 0;
			.row-cell {
				display: flex;
				justify-content:space-between;
				border-bottom: 1px solid #E9E9E9;
				padding: 32upx 0;
				.row-cell-left {
					font-size: 30upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 30upx;
				}
				.row-cell-right {
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
					line-height: 40upx;
				}
			}
			.row-li {
				padding-top: 16upx;
				.row-li-cell {
					display: flex;
					justify-content:space-between;
					align-items: center;
					.row-li-cell-left {
						font-size: 30upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #333333;
						line-height: 30upx;
					}
				}
				.tips {
					margin-top: 16upx;
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
					line-height: 34upx;
				}
			}
		}
		.sign-out-btn {
			height: 100upx;
			background: #FFFFFF;
			border-radius: 12px;
			font-size: 30upx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
			line-height: 100upx;
		}
		.graph-code {
			margin-top: 32upx;
		}
		.sms-code {
			display: flex;
			margin-top: 32upx;
			align-items: center;
			.code-input {
				border: 1px solid #E9E9E9;
				height: 70upx;
				border-radius: 10upx;
				font-size: 28upx;
				padding-left: 20upx;
			}
			.send-code-btn{
				width: 200upx;
				height: 70upx;
				background: $theme-background-color;
				color: #FFFFFF;
				font-size: 28upx;
				line-height: 70upx;
			}
		}
	}
</style>
